<template>
  <el-button type="success" @click="add">添加送水工信息</el-button>
  <!--  <el-button type="primary">回到首页</el-button>-->
  <br/>
  <br/>
  <div style="">
    送水工名称：
    <el-input style="width: 15%" v-model="waterManForm.name" clearable placeholder="请输入送水工名称"/>
    &nbsp;<el-button type="primary" @click="query">搜索</el-button>
  </div>
  <br/>
  <el-table :data="waterManData" border style="width: 100%">
    <el-table-column prop="id" label="送水工编号" width="180"/>
    <el-table-column prop="name" label="送水工名称" width="180"/>
    <el-table-column prop="basicSalary" label="送水工底薪" width="180">
      <template #default="scope">
        <el-input-number v-model="scope.row.basicSalary" :min="0" :step="500" :max="100000"
                         @change="handleChange(scope.row)"/>
      </template>
    </el-table-column>
    <el-table-column prop="deduct" label="送水工提成" width="180"/>
    <el-table-column prop="image" label="送水工照片" width="180">
      <template #default="scope">
        <el-image :src="scope.row.image" style="width: 50px;height: 50px"/>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="180">
      <template #default="scope">
        <el-button type="success" @click="upd(scope.row)">修改</el-button>
        <el-button type="danger" @click="del(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <p style="text-align: center;font-size: 15px">当前第<font color="red">{{ waterManForm.pageNum }}</font>页 共<font
      color="red">{{ waterManForm.pages }}</font>页 一共<font color="red">{{ waterManForm.total }}</font>条记录</p>
  <br/>
  <el-pagination
      style="position: absolute;right: 25%"
      v-model:current-page="waterManForm.pageNum"
      v-model:page-size="waterManForm.pageSize"
      :page-sizes="[5, 10, 20, 40]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="waterManForm.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
  />
</template>
<script setup>
import {ref, reactive, onMounted} from "vue";
import request from "@/api/request";
import router from "@/router";
import {ElMessage, ElMessageBox} from "element-plus";

const waterManForm = reactive({
  name: '',
  pageNum: 1,
  pageSize: 5,
  pages: 0,
  total: 0
})
const waterManData = ref([]);
const query = () => {
  request.get('/watermans/getwaterman', {
    params: {
      name: waterManForm.name,
      pageNum: waterManForm.pageNum,
      pageSize: waterManForm.pageSize
    }
  }).then(resp => {
    if (resp) {
      waterManData.value = resp.data.records;
      waterManForm.pages = resp.data.pages;
      waterManForm.total = resp.data.total;
    }
  })
}
const handleSizeChange = (val) => {
  waterManForm.pageSize = val;
  query();
}
const handleCurrentChange = (val) => {
  waterManForm.pageNum = val;
  query();
}

const handleChange = (row) => {
  request.put('/watermans/updbasicsalary?basicSalary=' + row.basicSalary + '&id=' + row.id).then(resp => {
    if (resp.code === 20000) {
      ElMessage.success(resp.data);
    } else {
      ElMessage.error(resp.data);
    }
  })
}

const add = () => {
  localStorage.setItem("waterManId", 0);
  router.replace('/addWaterMan');
}

const upd = (row) => {
  localStorage.setItem("waterManId", row.id);
  router.replace('/addWaterMan');
}
const del = (id) => {
  ElMessageBox.confirm(
      '确认删除吗?',
      '提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        request.delete('/watermans/delwaterMan/' + id).then(resp => {
          if (resp.code === 20000) {
            ElMessage.success(resp.data);
            query();
          } else {
            ElMessage.error(resp.data);
          }
        })
      })
}
onMounted(() => {
  query();
})
</script>